<template>
  <div class="randoms-container">
    <el-card>
      <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="formInline.keyword" placeholder="根据编号搜索"></el-input>
          </el-form-item>
          <el-form-item class="searchBtn">
            <el-button size="medium" @click="clearForm">清除</el-button>
            <el-button size="medium" type="primary" @click="searchBtn">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 消息提示 警告 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="questionType" label="题型"></el-table-column>
        <el-table-column prop="questionIDs" label="试题编号"></el-table-column>
        <el-table-column prop="addTime" label="录入时间"></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间（s）"></el-table-column>
        <el-table-column prop="accuracyRate" label="正确率（%）"></el-table-column>
        <el-table-column prop="userName" label="录入人"></el-table-column>
        <el-table-column label="操作" width="80">
          <template>
            <el-button size="mini" type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// import { getRandoms } from '@/api/questions.js'
export default {
  name: 'RandomsContainer',
  data() {
    return {
      formInline: {
        keyword: ''
      },
      total: 0,
      tableData: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getRandomsData() {
      // const res = await getRandoms({ page: 1, pageSize: 10000 })
      // console.log(res)
    },
    // 清除搜索框
    clearForm() {
      this.formInline = {}
    },
    // 搜索
    searchBtn() {}
  },
  created() {
    this.getRandomsData()
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.randoms-container {
  .el-form {
    /deep/.el-input__inner,
    .el-form-item__content {
      height: 32px;
    }
    .searchBtn {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
